<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <style type="text/css">
        .blue{
            color: aqua;
        }
        .import{
            font-weight:bold;
            font-size:xx-large;
        }
    </style>
</head>
<body>
<p id="p1">这是一段用来<b>显示</b>的文本</p>
<button id="p1Click1">点击显示</button>
<button id="p1Click2">点击显示</button>
<br>

请输入:<input type="text" id="input1">
<button id="iClick1">点击显示</button>
<br>

<a href="http://www.baidu.com">百度</a>
<button id="aClick1">点击显示</button>

<p id="setTH">这里是旧值</p>
<button id="addTHV">点击添加</button>
<br>

<button id="setFunction">点击添加</button>
<button id="setAttr">设置新的超链接</button>
<button id="setAttrFun">通过回调函数设置新的超链接</button>
<br>

<p id="append">文本末尾插入:</p>
<p id="prepend">文本开头插入</p>
<p id="after">元素末尾插入</p>
<p id="before">元素开头插入</p>
<button id="delete">删除</button>
<br>

<h1>标题1</h1>
<p id="addClass">段落1</p>
<button id="toggleclass">点击改变</button>
<br>

<div id="addcss" style="width: 300px;height: 100px">改变css样式</div>

<div id="frame" style="height: 100px;width: 300px;margin: 3px;border:1px solid blue;padding: 10px;background-color: aqua"></div>


<script src="jquery-3.2.1.js"></script>
<script src="jQuery-HTML.js"></script>
</body>
</html>